<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拓扑图</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
    <script src="jquery-3.2.1.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div>
    <button>保存视图</button>
    <button>添加服务</button>
    <button>显示控制</button>
</div>
<div style="width: 80%;height: 80%;margin-top: 24px">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height: 100%;background-color: #F0F0F0"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var categories = [];
    categories[0] = {name: '网关服务'};
    categories[1] = {name: '教育微服务'};
    categories[2] = {name: '监控服务'};
    var datas = [];
    var index = 0;
    datas[index++] = {
        name: "网关服务1",
        x: 60,
        y: 30,
        value: 1000,//被调用次数
        category: "网关服务"
    };
    datas[index++] = {
        name: "网关服务2",
        x: 80,
        y: 30,
        value: 2000,
        category: "网关服务"
    };
    datas[index++] = {
        name: "教育微服务1",
        x: 50,
        y: 60,
        value: 4000,
        category: "教育微服务"
    };
    datas[index++] = {
        name: "教育微服务2",
        x: 60,
        y: 60,
        value: 4562,
        category: "教育微服务"
    };
    datas[index++] = {
        name: "教育微服务3",
        x: 80,
        y: 60,
        value: 7895,
        category: "教育微服务"
    };
    datas[index++] = {
        name: "监控服务1",
        x: 90,
        y: 50,
        value: 4532,
        category: "监控服务"
    };
    var links = [];
    index = 0;
    links[index++] = {source: "网关服务1", target: "网关服务2"};
    links[index++] = {source: "网关服务2", target: "网关服务1"};

    links[index++] = {
        source: "教育微服务1",
        target: "网关服务1",
        lineStyle: {normal: {color: "#0f0", width: 5}},
        label: {
            normal: {
                show: true,
                formatter: "{normal|10000}{normal||}{error|2000}",
                rich: {
                    normal: {
                        color: 'black',
                        lineHeight: 20
                    },
                    error: {
                        color: 'red',
                        lineHeight: 20
                    },
                }
            }
        }
    };
    links[index++] = {
        source: "教育微服务2",
        target: "网关服务1",
        lineStyle: {normal: {color: "#0f0"}},
        label: {
            normal: {
                show: true,
                formatter: "{normal|4332}{normal||}{error|434535}",
                rich: {
                    normal: {
                        color: 'black',
                        lineHeight: 20
                    },
                    error: {
                        color: 'red',
                        lineHeight: 20
                    },
                }
            }
        }
    };
    links[index++] = {source: "网关服务1", target: "教育微服务3"};
    links[index++] = {
        source: "教育微服务2",
        target: "教育微服务3",
        value: -1,
        lineStyle: {normal: {color: "#f00", width: 5}},
        label: {
            normal: {
                show: true,
                formatter: "{normal|354365}{normal||}{error|4324}",
                rich: {
                    normal: {
                        color: 'black',
                        lineHeight: 20
                    },
                    error: {
                        color: 'red',
                        lineHeight: 20
                    },
                }
            }
        }
    };

    links[index++] = {source: "网关服务1", target: "监控服务1", lineStyle: {normal: {type: "dotted"}}};
    links[index++] = {source: "网关服务2", target: "监控服务1", lineStyle: {normal: {type: "dotted"}}};
    links[index++] = {source: "教育微服务1", target: "监控服务1"};
    links[index++] = {source: "教育微服务2", target: "监控服务1"};
    links[index++] = {source: "教育微服务3", target: "监控服务1"};
    links[index++] = {source: "教育微服务1", target: "教育微服务2", lineStyle: {normal: {type: "dotted", color: "#f00"}}};

    var option = {
        backgroundColor: "#F0F0F0",
        title: {
            text: "教育服务拓扑图",
            subtext: "",
            top: "top",
            left: "center"
        },
        legend: [{
            tooltip: {
                show: true
            },
            selectedMode: 'false',
            bottom: 20,
            data: categories.map(function (c) {
                return c.name;
            })
        }],
        toolbox: {
            show: true,
            feature: {
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        tooltip: {
            trigger: "item",
            show: true,
            alwaysShowContent: true,
            backgroundColor: "rgba(254,254,254,1)",
            borderWidth: 1,
            padding: 10,
            textStyle: {
                fontSize: 20
            },
            /*position: function (pos, params, dom, rect, size) {
                // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                var obj = {top: 48};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                return obj;
            },*/
            formatter: function (params, ticket, callback) {
                if (params && params.data && params.data.source && params.data.target) {
                    //连接线
                }
                else {
                    //端点
                    var tip = [
                        "<a href='拓扑绘制.html' target='_blank'>运行状态</a>",
                        "<a href='拓扑绘制.html' target='_blank'>负荷情况</a>",
                        "<a href='拓扑绘制.html' target='_blank'>API文档</a>",
                    ];
                    return tip.join("<br/>");
                }
            }
        },
        series: [
            {
                name: "服务拓扑",
                type: "graph",
                layout: "none",
                legendHoverLink: true,
                top: "center",
                left: "center",
                /*force: {
                    initLayout: "circular",
                    repulsion: 1000,
                    gravity: 0.1,
                    layoutAnimation: true
                },*/
                /*layout: "circular",
                circular: {
                    rotateLabel: false
                },*/
                symbol: 'rect',
                /*symbolSize: function (value, params) {
                    var rate = 1 + value / 100000;
                    return [80 * rate, 40 * rate];
                },*/
                symbolSize: [100, 50],
                label: {
                    normal: {
                        show: true
                    }
                },
                edgeSymbol: ["none", "arrow"],
                edgeSymbolSize: 20,
                coordinateSystem: null,//坐标系统
                /*xAxis: {
                    show: true,;
                    type: "value"
                },
                yAxis: {
                    show: true,
                    type: "value"
                },*/
                data: datas,
                links: links,
                categories: categories,
                roam: true,//平移缩放
            }
        ]
    };
    myChart.setOption(option);
    myChart.on('click', function (params) {
        if (params && params.data && params.data.source && params.data.target) {
            //连接线
        }
        else {
            //端点
        }
    });
</script>
</body>
</html>